<template>
  <div>
<h1>注册页面</h1>
<table>
  <tr>
    <td>登录名：</td>
    <td><input type="text" v-model="state.ZhangHao"></td>
  </tr>
  <tr>
    <td>密码</td>
    <td><input type="password" v-model="state.MiMa"></td>
  </tr>
  <tr>
    <td>真实姓名：</td>
    <td><input type="text" v-model="state.YName"></td>
  </tr>
  <tr>
    <td>身份证号：</td>
    <td><input type="text" maxlength="18" v-model="state.IDCard"></td>
  </tr>
  <tr>
    <td>手机号：</td>
    <td><input type="text" maxlength="11" v-model="state.Phone"></td>
  </tr>
  <tr>
    <td></td>
    <td><input type="button" value="注册" @click="zhu"></td>
  </tr>
</table>
  </div>
</template>

<script setup lang="ts">
import {reactive,toRefs} from 'vue'
import axios from 'axios'
import {useRoute,useRouter} from 'vue-router'
const route=useRoute()
const router=useRouter()

let data=reactive({
  state:{
    ZhangHao:'',
    MiMa:'',
    YName:'',
    IDCard:'',
    Phone:''
  }
})

let{state}=toRefs(data)

const zhu=()=>{

  if(state.value.ZhangHao==""){
    alert('登录名不能为空');
    return;
  }
  if(state.value.MiMa==""){
    alert('密码不能为空');
    return;
  }
  if(state.value.YName==""){
    alert('真实姓名不能为空');
    return;
  }
  if(state.value.IDCard==""){
    alert('身份证号不能为空');
    return;
  }
  if(state.value.Phone==""){
    alert('手机号不能为空');
    return;
  }

  axios({
    url:'/api/Users/ZhuCe',
    method:'post',
    data:state.value
  })
  .then(res=>{
    console.log(res);
    if(res.data.data==-1){
      alert('该用户已注册');
      return;
    }
    else if(res.data.data==-2){
      alert('该身份证号已存在');
      return;
    }
    else if(res.data.data==-1){
      alert('该手机号已存在');
      return
    }
    else{
      alert('注册成功');
      router.push('/denglu');
    }
  })
  .catch(err=>{
    console.log(err);
    
  })
}
</script>

<style scoped>

</style>